<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/loading/loading.js" charset="utf-8"></script>
<div id="loadingDemo">
    <div title='API' tabid='tab1'>
	  <form class="init ccay-form">	
		<div class="ccay-form-body ccay-form-custom">
			<ul>						
			    <li class="ccay-form-row">
			        <samp><h3>方法</h3></samp>
					<span class="ccay-form-input">
						<h3>描述</h3>
					</span>
				</li>
				<!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
				<li class="ccay-form-row">
					<samp class="i18n" i18nKey="$.fn.loading()"></samp>							    
					<span class="ccay-form-input">显示loading </span>
				</li>
				<li class="ccay-form-row">
					<samp class="i18n" i18nKey="$.fn.loadingClose()"></samp>							    
					<span class="ccay-form-input">关闭loading </span>
				</li>	
			</ul>
		</div>
	  </form>
	   
    </div>
    <div title='主内容区域loading' tabid='tab2'>
	    <form id="demo1" class="init ccay-form" action="">
		    	<h4><span>功能效果展示:</span></h4>
		    	<div id="openTry"  style='padding-left:30px'>
		    		<ul >
		    			<li  class="ccay-form-input">
		    					<input type="button" onclick="closeContentPanel()" value="set content panel loading" />
		    			</li>
		    		</ul>
		    	
				    <div>
					</div>
					<h3>html Code</h3>
					<div class='codeArea'>
						<pre id='html1'>&lt;input type="button" onclick="closeContentPanel2()" value="set content panel loading" /></pre>
					</div>
					<h3>js Code</h3>
					<div class='codeArea'>
						<pre id='js1'>
closeContentPanel2= function ()
{
	$('#ccayContentPanel').loading(); /*显示主内容区域loading,"ccayContentPanel"为主主内容区域*/
	setTimeout("$('#ccayContentPanel').loadingClose()",3000);/*定时关闭loading*/
}</pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#loadingDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
				</div>
			</div>
		  </form>	    	
    </div>
    <div title='指定区域loading' tabid='tab3'>
	    <form id="demo1" class="init ccay-form" action="">
		    	<h4><span>功能效果展示:</span></h4>
		    	<div id="openTry"  style='padding-left:30px'>
		    		<ul >
		    			<li  class="ccay-form-input">
						   		<div id="panel1" style="width:200px;height:100px;border:solid 1px #eee;margin:20px;">
									指定区域
								</div>
								<input type="button" onclick="$('#panel1').loading();" value="set panel loading" />
								<input type="button" onclick="$('#panel1').loadingClose();" value="close panel loading" />
		    			</li>
		    		</ul>
		    	
				    <div>
					</div>
					<h3>html Code</h3>
					<div class='codeArea'>
						<pre id='html2'>
&lt;div id="panel2" style="width:200px;height:100px;border:solid 1px #eee;margin:20px;">
   指定区域
&lt;/div>
&lt;input type="button" onclick="$('#panel2').loading();" value="set panel loading" />
&lt;input type="button" onclick="$('#panel2').loadingClose();" value="close panel loading" />
					</div>
					<div class="try">
						<a onclick="Ccay.example.openTry('#loadingDemo','',$('#html2').html())">亲自试一试</a>
					</div>
				</div>	
		  </form>
		  
		    	
    </div>
    <div title='弹出框的小loading' tabid='tab4'>
	    <form id="demo1" class="init ccay-form" action="">
		    	<h4><span>功能效果展示:</span></h4>
		    	<div id="openTry"  style='padding-left:30px'>
		    		<ul >
		    			<li  class="ccay-form-input">
						   	<input type="button" onclick="Ccay.UI.loading()" value="loading">
		    			</li>
		    		</ul>
		    	</div>
		    <div>
			</div>
			<h3>HTML Code</h3>
			<div class='codeArea'>
				<pre id='html1l'>
&lt;input type="button" onclick="Ccay.UI.loading()" value="loading">
				</pre>
			</div>
			
			<div class="try">
				<a onclick="Ccay.example.openTry('#loadingDemo','',$('#html1l').html())">亲自试一试</a>
			</div>
			
			<div id="closeTry"  style='padding-left:30px'>
		    		<ul >
		    			<li  class="ccay-form-input">
						   	<input type="button" onclick="Ccay.UI.loadingClose()" value="loadingClose">
		    			</li>
		    		</ul>
		    	</div>
		    	<h3>HTML Code</h3>
			<div class='codeArea'>
				<pre id='html2l'>
&lt;input type="button" onclick="Ccay.UI.loadingClose()" value="loadingClose">
				</pre>
			</div>
		  </form>
		  
    </div>
    <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	<div title="FAQ">
	  <form class="init ccay-form">
		<div class="ccay-form-body ccay-form-custom">
		    <ul>                     
		        <li class="ccay-form-row">
		            <samp><h3>问题</h3></samp>
		           <span class="ccay-form-input">
		               <h3>解决方案</h3>
		           </span>
		        </li>
		        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole 
		        <li class="ccay-form-row">
		                          <samp class="i18n" i18nKey=""></samp>                          
		                         <span class="ccay-form-input"></span>
		        </li>  -->
		    </ul>
		</div>
	  </form>                    
    </div>  
</div>	 


